import React, { Fragment } from 'react';
import TodoItem from './TodoItem'
import axios from 'axios'
import './style.css'

class TodoList extends React.Component {

  constructor(props) {
    super(props);
    //bind这个放在构造器中，只会执行一次，可以提升性能
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleButtonClick = this.handleButtonClick.bind(this);
    this.handleItemClick = this.handleItemClick.bind(this);
    this.state = {
      inputValue: '',
      list: []
    }
  }

  componentDidMount(){
    axios.get('http://localhost.charlesproxy.com:3000/api/todolist.json')
      .then((res) => {
        console.log(res.data);
        this.setState(() => ({
          list: [...res.data]
        }));
      })
      .catch(() => {alert('error')})
  }

  render() {
    return (
      <Fragment>
        <div>
          <label htmlFor='insertArea'>
            输入内容
          </label>
          <input
            id='insertArea'
            className='input'
            value={this.state.inputValue}
            ref={(inputText) => {this.input = inputText}}
            // class 类不管是原型方法还是静态方法定义，
            //“this”值在被调用的函数内部将为 undefined，为了避免这个问题只能强制去绑定this来指向组件
            onChange={this.handleInputChange}
          />
          <button
            onClick={this.handleButtonClick}
          >提交</button>
        </div>
        <ul>
          {this.getItem()}
        </ul>
      </Fragment>
    );
  }

  getItem() {
    return this.state.list.map((item, index) => {
      return (
        <TodoItem
          content={item}
          index={index}
          key={index}
          deleteItem={this.handleItemClick}
        />
      )
    }
    )
  }

  handleInputChange() {
    const value = this.input.value;
    this.setState(() => ({
      inputValue: value
    }),() => {
      console.log(this.input.value);
    });
    //console.log(this.state.inputValue);
    //this.state.inputValue延迟问题：setState是异步的
  }

  handleButtonClick() {
    this.setState((prevState) => ({
      list: [...prevState.list, prevState.inputValue],
      inputValue: ''
    }));
  }

  handleItemClick(index) {
    //immutable概念：不直接操作state数据
    this.setState((prevState) => {
      //这个花括号返回的是函数体
      const list = prevState.list;
      list.splice(index, 1);
      //这个花括号返回对象，list: list 可以直接list
      return { list }
    });
  }
}

export default TodoList;